const height = 600;
const width = 1600;

const svg = d3.select('#my_svg')
    .attr('width', width)
    .attr('height', height);
    svg.append("image")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 1650)
        .attr("height", null)
        .attr("href", "2.png") // 将此路径替换为你的背景图像URL
        .attr("preserveAspectRatio", "xMidYMid slice"); // 保证背景图填充整个 SVG 区域
// 添加一个全局的提示框元素
const tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("background-color", "white")
    .style("border", "1px solid #ccc")
    .style("padding", "10px")
    .style("border-radius", "5px")
    .style("font-size", "14px")
    .style("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)")
    .style("pointer-events", "none") // 防止鼠标事件干扰
    .style("display", "none"); // 默认隐藏

// 添加一个背景矩形以显示 SVG 覆盖的范围
svg.append('rect')
    .attr('width', width)
    .attr('height', height)
    .attr('fill', 'none') // 保持透明背景
    .attr('stroke', 'black') // 修改边框颜色为淡蓝色，与进攻动画搭配
    .attr('stroke-width', 5) // 调整线宽为 5，使其更明显
    .style('pointer-events', 'all') // 确保背景矩形可以捕获所有鼠标事件
    .on('click', function (event) {
        // 点击空白区域时移除动画效果
        svg.selectAll(".path-line").remove(); // 移除路径
        svg.selectAll(".special-node").attr("fill", "yellow").attr("stroke", "none"); // 恢复节点默认样式
        tooltip.style("display", "none"); // 隐藏提示框
    });

Promise.all([
    d3.json("2.geojson"), // 加载 GeoJSON 数据
    d3.csv("location.csv"), // 加载地点的 CSV 数据
    d3.csv("special_info.csv"), // 加载路径数据
    d3.csv("temperature.csv"), // 加载路径数据
]).then((data) => {
    let geojson = data[0]; // 获取 GeoJSON 数据
    let locations = data[1]; // 获取地点的 CSV 数据
    let paths = data[2]; // 获取路径的 CSV 数据
    let temperatures = data[3]; // 获取路径的 CSV 数据

    const margin = 80;
    const bounds = d3.geoBounds(geojson); // 计算 GeoJSON 的地理边界
    const center = d3.geoCentroid(geojson); // 计算 GeoJSON 的地理中心
    const specialNodes = paths    // 获取 special_info 中 miaoshu 列非空的节点，并按日期排序
        .filter(d => d.miaoshu && d.miaoshu.trim() !== "")
        .sort((a, b) => new Date(a.date) - new Date(b.date));
        
    const projection = d3.geoMercator()    // 设置投影，动态调整中心和比例尺
        .center(center) // 使用 GeoJSON 的中心点
        .fitExtent([[margin, margin], [width - margin, height - margin]], geojson);
    const path = d3.geoPath().projection(projection); // 创建路径生成器并应用投影

    // 绘制 GeoJSON 数据
    svg.selectAll("path")
        .data(geojson.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "#a6cee3")
        .attr("opacity", 0.3)
        .attr("stroke", "black")
        .style("pointer-events", "none"); // 路径忽略鼠标事件

    // 数据分组：分开进攻路径和撤退路径
    const attackPaths = paths.filter(d => d.Direction === "A"); // 进攻路径
    const retreatPaths = paths.filter(d => d.Direction === "R"); // 撤退路径

    // 动画绘制函数
    function drawPaths(data, color, duration, delay = 0) {
        const pathData = d3.group(data, d => d.Group); // 按 Group 分组绘制

        pathData.forEach(group => {
            // 分段路径绘制
            for (let i = 1; i < group.length; i++) {
                const startNode = group[i - 1];
                const endNode = group[i];

                const x1 = projection([+startNode.Longitude, +startNode.Latitude])[0];
                const y1 = projection([+startNode.Longitude, +startNode.Latitude])[1];
                const x2 = projection([+endNode.Longitude, +endNode.Latitude])[0];
                const y2 = projection([+endNode.Longitude, +endNode.Latitude])[1];

                // 计算线段宽度（取起始节点的 Population）
                const lineWidth = startNode.Population / 3000;

                svg.append("line")
                .attr("class", "path-line") // 添加类名
                .attr("x1", x1)
                .attr("y1", y1)
                .attr("x2", x1)
                .attr("y2", y1)
                .attr("stroke", color)
                .attr("stroke-width", lineWidth)
                .attr("stroke-linecap", "round")
                .attr("opacity", 0.7)
                .transition()
                .duration(duration / group.length)
                .ease(d3.easeLinear)
                .attr("x2", x2)
                .attr("y2", y2);
            }
                    // 重新绘制关键节点和透明伪影
        svg.selectAll(".special-node").remove();
        svg.selectAll(".hover-area").remove();

        // 再次绘制 specialNodes
        svg.selectAll(".special-node")
            .data(specialNodes)
            .enter()
            .append("g")
            .each(function (d) {
                const group = d3.select(this);
                const coords = projection([+d.Longitude, +d.Latitude]);
                const cx = coords ? coords[0] : -9999;
                const cy = coords ? coords[1] : -9999;

                group.append("circle")
                    .attr("class", "special-node")
                    .attr("cx", cx)
                    .attr("cy", cy)
                    .attr("r", 10)
                    .attr("fill", "yellow")
                    .attr("stroke", "none");

                group.append("circle")
                    .attr("class", "hover-area")
                    .attr("cx", cx)
                    .attr("cy", cy)
                    .attr("r", 20)
                    .attr("fill", "transparent")
                    .style("cursor", "pointer")
                    .on("mouseover", function () {
                        tooltip
                            .html(`<strong>Date:</strong> ${d.date || "N/A"}<br><strong>Description:</strong> ${d.miaoshu || "N/A"}`)
                            .style("left", `${cx + 30}px`)
                            .style("top", `${cy - 20}px`)
                            .style("display", "block");

                        group.select(".special-node")
                            .attr("stroke", "black")
                            .attr("fill", "white");
                    })
                    .on("mouseout", function () {
                        tooltip.style("display", "none");

                        group.select(".special-node")
                            .attr("stroke", "none")
                            .attr("fill", "yellow");
                    });
            });
        });
    }

    // 绘制地点标记
    svg.selectAll("circle")
        .data(locations)
        .enter()
        .append("circle")
        .attr("cx", d => {
            const coords = projection([+d.Longitude, +d.Latitude]);
            return coords ? coords[0] : -9999; // 如果超出范围，返回 -9999 避免渲染
        })
        .attr("cy", d => {
            const coords = projection([+d.Longitude, +d.Latitude]);
            return coords ? coords[1] : -9999;
        })
        .attr("r", 5)
        .attr("fill", "red")
        .attr("stroke", "black")
        .attr("stroke-width", 1);

    // 添加地点名称文本
    svg.selectAll("text")
        .data(locations)
        .enter()
        .append("text")
        .attr("x", d => {
            const coords = projection([+d.Longitude, +d.Latitude]);
            return coords ? coords[0] + 8 : -9999;
        })
        .attr("y", d => {
            const coords = projection([+d.Longitude, +d.Latitude]);
            return coords ? coords[1] - 8 : -9999;
        })
        .attr("font-size", "12px")
        .attr("fill", "black")
        .text(d => d.Location);

    svg.selectAll(".special-node")
        .data(specialNodes)
        .enter()
        .append("g") // 使用 <g> 分组便于管理节点和伪影
        .each(function (d) {
            const group = d3.select(this);
            const coords = projection([+d.Longitude, +d.Latitude]);
            const cx = coords ? coords[0] : -9999;
            const cy = coords ? coords[1] : -9999;

            // 添加实际可见节点
            group.append("circle")
                .attr("class", "special-node")
                .attr("cx", cx)
                .attr("cy", cy)
                .attr("r", 10) // 实际可见节点半径
                .attr("fill", "yellow") // 默认可见样式
                .attr("stroke", "none") // 默认无边框
                .attr("stroke-width", 1);

            // 添加透明伪影
            group.append("circle")
                .attr("class", "hover-area")
                .attr("cx", cx)
                .attr("cy", cy)
                .attr("r", 10) // 扩大触发区域半径
                .attr("fill", "transparent") // 透明填充
                .style("cursor", "pointer")
                .on("mouseover", function () {
                    // 显示提示框
                    tooltip
                        .html(`<strong>Date:</strong> ${d.date || "N/A"}<br><strong>Description:</strong> ${d.miaoshu || "N/A"}`)
                        .style("left", `${cx + 30}px`)
                        .style("top", `${cy - 20}px`)
                        .style("display", "block");

                    group.select(".special-node")
                        .attr("stroke", "black") // 鼠标悬浮时添加边框
                        .attr("fill", "white"); // 鼠标悬浮时填充白色
                })
                .on("mouseout", function () {
                    tooltip.style("display", "none");

                    group.select(".special-node")
                        .attr("stroke", "none")
                        .attr("fill", "yellow"); // 恢复默认样式
                });
        });
        
// 更新路径和高亮时间节点
function updatePaths(currentDate) {
    // 清除现有路径
    svg.selectAll(".path-line").remove();
    
    // 过滤路径数据，仅包含当前时间及之前的路径
    const filteredAttackPaths = attackPaths.filter(d => new Date(d.date) <= new Date(currentDate));
    const filteredRetreatPaths = retreatPaths.filter(d => new Date(d.date) <= new Date(currentDate));
    
    // 重新绘制路径
    drawPaths(filteredAttackPaths, "#8dc6ff", 1000);
    drawPaths(filteredRetreatPaths, "#ffbdbd", 1000);
    
    // 更新饼状图
    const currentPopulation = specialNodes.find(d => d.date === currentDate)?.Population || 0;
    const initialPopulation = specialNodes[0]?.Population || 1; // 避免除以 0
    const percentage = (currentPopulation / initialPopulation) * 100;
    drawPieChart(percentage);
}
        
// 提取唯一的日期
const uniqueDates = [...new Map(specialNodes.map(d => [d.date, d])).values()];
console.log(uniqueDates)
// 获取时间轴容器
const timeline = d3.select("#timeline");
// 计算每个按钮的位置，均匀分布
const numNodes = uniqueDates.length;
const timelineWidth = 1300; // 可用的宽度
const margin2 = 50; // 两端的边距
const step = (timelineWidth - 2 * margin2) / (numNodes - 1);

// 点击时间轴按钮时，更新路径和高亮
uniqueDates.forEach((d, i) => {
    // 跳过第一个节点，i 从 1 开始
    if (i === 0) return;

    const position = margin2 + (i) * step; // 使用 i 直接计算位置，不需要减 1

    const button = timeline.append("button")
        .attr("class", "timeline-button")
        .style("left", `${position}px`)
        .on("click", function () {
            console.log(`Clicked on: ${d.date}`);

            updateBackgroundColor(d.date);  // 根据日期更新背景颜色

            updatePaths(d.date); // 更新路径


            // 取消之前的高亮
            timeline.selectAll(".timeline-button")
                .classed("active", false); // 移除所有按钮的 active 类

            // 给当前点击的按钮添加高亮效果
            d3.select(this).classed("active", true); // 添加 active 类
        })
        .text("●");

    // 添加时间标签
    timeline.append("div")
        .attr("class", "timeline-label")
        .style("left", `${position}px`)
        .text(d.date);
});

const pieSvg = d3.select("#pie-chart")
    .append("svg")
    .attr("width", 150)
    .attr("height", 150)
    .append("g")
    .attr("transform", "translate(75, 75)"); // 中心点

const arcGenerator = d3.arc()
    .innerRadius(50) // 内环半径
    .outerRadius(75); // 外环半径

const pie = d3.pie()
    .sort(null)
    .value(d => d.value); // 设置数据值

    function drawPieChart(percentage) {
        const data = [
            { value: percentage, color: "#FFA07A" }, // 剩余兵力
            { value: 100 - percentage, color: "#e6e6e6" }, // 已损失兵力
        ];
    
        const paths = pieSvg.selectAll("path").data(pie(data));
    
        // 更新路径
        paths
            .transition()
            .duration(500)
            .attr("d", arcGenerator)
            .attr("fill", d => d.data.color);
    
        // 新增路径
        paths
            .enter()
            .append("path")
            .attr("d", arcGenerator)
            .attr("fill", d => d.data.color);
    
        // 删除多余的路径
        paths.exit().remove();
    
        // 添加或更新中心文本
        const centerText = pieSvg.selectAll("text").data([percentage]);
    
        centerText
            .enter()
            .append("text")
            .merge(centerText)
            .attr("text-anchor", "middle")
            .attr("dy", "0.35em")
            .attr("font-size", "20px")
            .attr("font-weight", "bold")
            .attr("fill", "#333")
            .text(d => `${d.toFixed(1)}%`);
    
        centerText.exit().remove();
    }
    
drawPieChart(100);

// 获取按钮和容器元素
const infoButton = document.getElementById("info-button");
const mySvg = document.getElementById("my_svg");
const barChartContainer = document.getElementById("bar-chart-container");

infoButton.addEventListener("click", function () {
    if (infoButton.classList.contains("return")) {
        // 返回主界面
        infoButton.classList.remove("return");
        infoButton.textContent = "详细信息";
        mySvg.style.opacity = 1; // 显示原始 SVG 内容
        barChartContainer.style.display = "none"; // 隐藏条形图容器
        barChartContainer.style.opacity = 0;  // 恢复透明度
        // 清空条形图
        barChartContainer.innerHTML = '';
        drawOriginalContent(); // 重新绘制原始内容
    } else {
        // 显示条形图
        infoButton.classList.add("return");
        infoButton.textContent = "返回主界面";
        mySvg.style.opacity = 0; // 隐藏原始 SVG 内容
        barChartContainer.style.display = "block"; // 显示条形图容器

        // 创建条形图
        createBarChart();
        
        // 添加渐变显示效果
        setTimeout(() => {
            barChartContainer.style.opacity = 1;  // 渐变显示
        }, 100); // 轻微延迟让显示过程更平滑
    }
});



function createBarChart() {
    const barChartWidth = 1100;  // 调整图表宽度
    const barChartHeight = 400;

    // 设置边距，避免坐标轴和图表内容重叠
    const margin = { top: 20, right: 30, bottom: 80, left: 100 };  // 增加left边距
    const width = barChartWidth - margin.left - margin.right;
    const height = barChartHeight - margin.top - margin.bottom;

    // 创建条形图的容器
    const barChartSvg = d3.select("#bar-chart-container")
        .append("svg")
        .attr("width", barChartWidth)
        .attr("height", barChartHeight)
        .append("g")  // 添加一个`g`元素，进行位置调整
        .attr("transform", `translate(${margin.left},${margin.top})`);

    // 提取特殊节点，优先筛选出 Group === 1 且日期唯一的节点
    const specialNodes = paths  // 获取 special_info 中 miaoshu 列非空的节点，并按日期排序
        .filter(d => d.miaoshu && d.miaoshu.trim() !== "")  // 过滤 miaoshu 不为空的节点
        .filter(d => d.Group === "1")  // 只保留 Group 为 1 的节点
        .sort((a, b) => new Date(a.date) - new Date(b.date));  // 按日期排序

    // 去除日期重复的节点，保留每个日期的第一个节点
    const uniqueNodes = [...new Map(specialNodes.map(d => [d.date, d])).values()];

    uniqueNodes.forEach(d => {
        d.Population = +d.Population; // 强制转换为数字类型
    });

    // X 轴缩放：使用日期作为类别，增加条形图宽度
    const xScale = d3.scaleBand()
        .domain(uniqueNodes.map(d => d.date))  // 使用所有唯一日期
        .range([0, width])
        .padding(0.2);  // 增加间距，防止文本重叠

    // Y 轴缩放：以最大 Population 为 y 轴的最大值
    const yScale = d3.scaleLinear()
        .domain([0, d3.max(uniqueNodes, d => d.Population)])  // 最大值为 Population 中的最大值
        .nice()
        .range([height, 0]);

    // 绘制条形图
    barChartSvg.selectAll(".bar")
        .data(uniqueNodes)  // 使用筛选后的数据
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", d => xScale(d.date))  // 获取每个条形图的 x 坐标
        .attr("y", d => yScale(d.Population))  // 获取每个条形图的 y 坐标
        .attr("width", xScale.bandwidth())  // 设置条形图的宽度
        .attr("height", d => height - yScale(d.Population))  // 设置条形图的高度
        .attr("fill", "#FFA07A")
        .on("mouseover", function(event, d) {
            // 高亮当前条形图
            d3.select(this).attr("fill", "#ff5733"); // 高亮颜色
        })
        .on("mouseout", function() {
            // 恢复原始颜色
            d3.select(this).attr("fill", "#FFA07A");
        });

    // 添加 X 轴
    const xAxis = d3.axisBottom(xScale)
    .tickSize(6)  // 增加刻度线的长度
    .tickPadding(10)  // 增加文本与轴的间距
    .tickFormat(d => d.slice(-5));  // 格式化日期，保留后 5 位

    barChartSvg.append("g")
        .attr("transform", `translate(0, ${height})`)  // 调整位置
        .call(xAxis)
        .selectAll("text")  // 调整X轴文本
        .style("text-anchor", "middle")  // 使文本居中
        .style("font-size", "12px")  // 设置字体大小
        .style("font-style", "normal")  // 确保文本为常规字体（非斜体）
        .style("white-space", "nowrap")  // 防止换行
        .style("transform", "rotate(0deg)");  // 使文本水平

    // 添加 Y 轴
    const yAxis = d3.axisLeft(yScale)
        .ticks(5)  // 设置 Y 轴的刻度数
        .tickFormat(d3.format(",.0f"));  // 确保显示整数格式

    barChartSvg.append("g")
        .call(yAxis)
        .selectAll("text")  // 调整Y轴文本
        .style("font-size", "12px");

    // 添加轴标题
    barChartSvg.append("text")
        .attr("transform", "rotate(-90)")  // Y轴标题需要旋转
        .attr("x", -height / 2)
        .attr("y", -margin.left + 10)
        .style("text-anchor", "middle")
        .style("font-size", "14px")
        .text("Population");

    barChartSvg.append("text")
        .attr("x", width / 2)
        .attr("y", height + margin.bottom - 10)
        .style("text-anchor", "middle")
        .style("font-size", "14px")
        .text("Date");

    // 在条形图上方添加数值
    barChartSvg.selectAll(".value")
        .data(uniqueNodes)  // 使用筛选后的数据
        .enter()
        .append("text")
        .attr("class", "value")
        .attr("x", d => xScale(d.date) + xScale.bandwidth() / 2)  // 水平居中
        .attr("y", d => yScale(d.Population) - 10)  // 稍微偏离条形图顶部
        .attr("text-anchor", "middle")
        .attr("font-size", "12px")
        .attr("fill", "#333")
        .text(d => d.Population);  // 显示对应的Population值
}


// 重新绘制原始 SVG 内容
function drawOriginalContent() {
    // 在此函数中重新绘制原始的 `my_svg` 内容
    // 比如重新绘制地图、路径等内容
    d3.json("2.geojson").then(function (geojson) {
        // 使用 `geojson` 数据重新绘制
        const projection = d3.geoMercator().fitSize([1600, 600], geojson);
        const path = d3.geoPath().projection(projection);

        mySvg.append('g')
            .selectAll('path')
            .data(geojson.features)
            .enter()
            .append('path')
            .attr('d', path)
            .attr('fill', '#a6cee3')
            .attr('stroke', 'black');
    });
}

// 创建一个线性比例尺，用来根据温度值计算颜色
const colorScale = d3.scaleLinear()
    .domain([0, -30])  // 假设温度范围是 0 到 30
    .range([ 
        "rgba(173, 216, 230, 0.9)", // 浅蓝色，透明度 0.2
        "rgba(0, 12, 246, 0.75)"    
    ]);

    function updateBackgroundColor(date) {
        // 查找对应日期的温度值
        const temperature = temperatures.find(d => d.date === date)?.temp;
    
        if (temperature !== undefined) {
            // 根据温度值计算颜色
            const color = colorScale(temperature);
    
            // 通过 D3 更新背景颜色，并加入过渡效果
            d3.select('body')  // 或者选择你想更改背景颜色的元素
                .transition()
                .duration(500)  // 过渡时间 500ms
                .style('background-color', color);  // 设置背景颜色
    
            // 更新页面左上方的温度显示
            d3.select("#current-temperature")
                .text(`${temperature}`);  // 显示具体的温度值
        } else {
            // 如果没有找到对应的温度值，则设置为白色背景并显示 "Unknown"
            d3.select('body')  // 或者选择你想更改背景颜色的元素
                .transition()
                .duration(500)  // 过渡时间 500ms
                .style('background-color', 'white');  // 设置为白色背景
    
            // 更新页面左上方的温度显示为 "Unknown"
            d3.select("#current-temperature")
                .text('Unknown');  // 显示 "Unknown"
        }
    }
    
});



const data44 = [
    {
      name: "法兰西第一帝国",
      armySize: 130000,
      casualties: 35000,
      leaderImage: "image/napolun.jpg"
    },
    {
      name: "俄罗斯帝国",
      armySize: 150000,
      casualties: 45000,
      leaderImage: "image/Kutuzov1.jpg"
    }
  ];
  

// 设置图表的宽度和高度
const margin2 = {top: 60, right: 30, bottom: 40, left: 150};
const width2 = 800 - margin2.left - margin2.right;
const height2 = 400 - margin2.top - margin2.bottom;

// 创建SVG画布
const svg2 = d3.select("#chart")
  .attr("width", width2 + margin2.left + margin2.right)
  .attr("height", height2 + margin2.top + margin2.bottom)
  .append("g")
  .attr("transform", `translate(${margin2.left},${margin2.top})`);

// 创建比例尺
const y = d3.scaleBand()
  .domain(data44.map(d => d.name))
  .range([0, height2])
  .padding(0.1);

const x = d3.scaleLinear()
  .domain([0, d3.max(data44, d => Math.max(d.armySize, d.casualties))])
  .nice()
  .range([0, width2]);

// 创建Y轴和X轴
svg2.append("g")
  .selectAll(".y-axis")
  .data(data44)
  .enter()
  .append("g")
  .attr("class", "y-axis")
  .attr("transform", d => `translate(0, ${y(d.name)})`)
  .append("text")
  .attr("x", -10)
  .attr("y", y.bandwidth() / 2)
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .text(d => d.name);

// 添加兵力条形（横向）
svg2.selectAll(".army-bar")
  .data(data44)
  .enter()
  .append("rect")
  .attr("class", "army-bar")
  .attr("y", d => y(d.name))
  .attr("x", 0)
  .attr("width", d => x(d.armySize))
  .attr("height", y.bandwidth() / 2)
  .attr("fill", "steelblue")
  .on("mouseover", function() {
    // 通过 this.__data__ 获取当前绑定的数据 d
    var d = this.__data__;
    d3.select(this).classed("highlight", true);
    displayArmyInfo(d);  // 显示兵力数据
  })
  .on("mouseout", function() {
    d3.select(this).classed("highlight", false);
    hideInfo();  // 隐藏所有数据
  });

// 显示兵力信息
function displayArmyInfo(d) {
  const infoBox = d3.select("#army-info");
  infoBox.style("display", "block")
    .text(d.name + " 兵力: " + d.armySize + "人");
}

// 添加伤亡条形（横向）
svg2.selectAll(".casualty-bar")
  .data(data44)
  .enter()
  .append("rect")
  .attr("class", "casualty-bar")
  .attr("y", d => y(d.name) + y.bandwidth() / 2)
  .attr("x", 0)
  .attr("width", d => x(d.casualties))
  .attr("height", y.bandwidth() / 2)
  .attr("fill", "tomato")
  .on("mouseover", function() {
    // 通过 this.__data__ 获取当前绑定的数据 d
    var d = this.__data__;
    d3.select(this).classed("highlight", true);
    displayCasualtyInfo(d);  // 显示伤亡数据
  })
  .on("mouseout", function() {
    d3.select(this).classed("highlight", false);
    hideInfo();  // 隐藏所有数据
  });

// 显示伤亡信息
function displayCasualtyInfo(d) {
  const infoBox = d3.select("#casualty-info");
  infoBox.style("display", "block")
    .text(d.name + " 伤亡: " + d.casualties + "人");
}

// 隐藏信息框
function hideInfo() {
  d3.select("#army-info").style("display", "none");
  d3.select("#casualty-info").style("display", "none");
}

    // 获取切换视图按钮和容器元素
const switchViewButton = document.getElementById("dibu-button-container");
const ChartContainer = document.getElementById("chart-container");
const barChartContainer = document.getElementById("bar-chart-container");
const mySvg2 = document.getElementById("my_svg");
const timing = document.getElementById("timeline-container");
const b1=document.getElementById("info-button-container");
const tt=document.getElementById("temperature-display");
const tt2=document.getElementById("thermometer-container");

// 给切换视图按钮添加点击事件
switchViewButton.addEventListener("click", function () {
    // 如果当前视图是显示原始 SVG，切换到显示条形图
    if (ChartContainer.style.display === "none") {
        mySvg2.style.display = "none";  // 隐藏原始视图
        barChartContainer.style.display="none";
        timing.style.display="none";
        b1.style.display= "none";
        tt.style.display="none";
        tt2.style.display="none";
        ChartContainer.style.display = "block";  // 显示条形图视图

        d3.select("body").style("padding-top", "0px")
        .style("font-family", "'Arial', sans-serif")
        .style("background", "linear-gradient(to right, #f0f8ff, #e6f7ff)")
        .style("color", "#333");
        // d3.select("#chart").attr("transform", `translate(${margin2.left},${margin2.top})`)

    } else {
        mySvg2.style.display = "block";  // 显示原始视图
        barChartContainer.style.display="block";
        ChartContainer.style.display = "none";  // 隐藏条形图视图
        timing.style.display="block";
        tt.style.display="block";
        b1.style.display= "block";
        tt2.style.display="block";

        d3.select("body").style("padding-top", "100px");


    }
});
